<!-- 合同管理 -->
<template>
    <div class="container">
        <div class="selectBox1">
            <div class>
                <span style="width:1rem"></span>
                <el-button size="mini" icon="el-icon-plus" @click="showNewContract" type="primary"
                           v-hasPermi="['businessDataSubsystem:contract:Insert']">新增
                </el-button>
                <el-button size="mini" icon="el-icon-edit" @click="showDetail" type="primary"
                           v-hasPermi="['businessDataSubsystem:contract:Update']">修改
                </el-button>
                <el-button size="mini" icon="el-icon-delete" @click="deleteContract" type="primary"
                           v-hasPermi="['businessDataSubsystem:contract:Delete']">删除
                </el-button>
                <el-button size="mini" icon="el-icon-s-check" @click="contracTranfer" type="primary"
                           v-hasPermi="['businessDataSubsystem:contract:ShenHe']">审核
                </el-button>
                <el-button
                        size="mini"
                        icon="el-icon-refresh-left"
                        @click="contracTranferClose"
                        type="primary" v-hasPermi="['businessDataSubsystem:contract:QxShenHe']"
                >取消审核
                </el-button>

            </div>
            <div>
                <el-form ref="searchForm" size="mini" :model="searchForm" inline>

                    <el-form-item label>
                        <el-select
                                size="mini"
                                filterable
                                clearable
                                placeholder="组织"
                                v-model="searchForm.companyId"
                                class="others"
                                @keyup.enter.native="getoutMessageList"
                        >
                            <el-option
                                    v-for="(item, index) in companyList"
                                    :key="item.companyId"
                                    :label="item.companyName"
                                    :value="item.companyId"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-select
                                size="mini"
                                filterable
                                clearable
                                remote
                                placeholder="客户"
                                v-model="searchForm.customerId"
                                class="others"
                                @keyup.enter.native="getoutMessageList"
                        >
                            <el-option
                                    v-for="(item, index) in customerList"
                                    :key="item.customerId"
                                    :label="item.customerName"
                                    :value="item.customerId"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-input
                                clearable
                                v-model="searchForm.contactNo"
                                size="mini"
                                placeholder="合同编号"
                                @input="searchForm.contactNo = verifyfilter('char', searchForm.contractNo)"
                                class="others"
                                @keyup.enter.native="getoutMessageList"
                        />
                    </el-form-item>

                    <el-form-item>
                        <el-button class="search_btn" type="primary" icon="el-icon-search" size="mini"
                                   @click="getoutMessageList">查询
                        </el-button>
                        <el-button icon="el-icon-refresh-right" size="mini" @click="resetSearch">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="search_form commonSearch" v-show="showOrHidden">
            <div>
                <el-date-picker
                        v-model="searchForm.date"
                        size="mini"
                        type="date"
                        format="yyyy年MM月dd日"
                        value-format="yyyy/MM/dd"
                        placeholder="选择有效日期"
                        class="others"
                ></el-date-picker>
            </div>
        </div>
        <keep-alive>
            <template>
                <div>
                    <BaseTable @details="getContractInfo" :data="tableData" :columns="columns" :tableHeight="tableHeight" :pagination="false"
                               :loading="loading">
                    </BaseTable>
<!--                    <el-table-->
<!--                            stripe-->
<!--                            width="100%"-->
<!--                            highlight-current-row-->
<!--                            :height="tableHeight"-->
<!--                            :data="tableData"-->
<!--                            style="width: 100%"-->
<!--                            row-key="id"-->
<!--                            ref="contractTable"-->
<!--                            @row-click="getContractInfo"-->
<!--                            @row-dblclick="doubleClickRow"-->
<!--                            :tree-props="{ children: 'children' }"-->
<!--                            v-tableMove-->
<!--                            v-loading="loading"-->
<!--                            element-loading-text="网络开小差，正在努力加载..."-->
<!--                            element-loading-spinner="el-icon-loading"-->
<!--                    >-->
<!--                        <el-table-column show-overflow-tooltip prop="companyName" label="组织"-->
<!--                                         width="250px"></el-table-column>-->
<!--                        <el-table-column show-overflow-tooltip prop="contactNo" label="合同编号"-->
<!--                                         width="200px"></el-table-column>-->
<!--                        <el-table-column show-overflow-tooltip prop="customerName" label="客户"-->
<!--                                         width="250px"></el-table-column>-->
<!--                        <el-table-column show-overflow-tooltip prop="dictLabel" label="业务类型"-->
<!--                                         ></el-table-column>-->
<!--                        <el-table-column label="合同类型" width="130px" show-overflow-tooltip>-->
<!--                            <template slot-scope="scope">-->
<!--                                <span v-if="scope.row.contractType == '1'" style="color: #36ba2b">单笔合同</span>-->
<!--                                <span v-else-if="scope.row.contractType == '2'" style="color: #0b6cd6">年度合同</span>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
<!--                        <el-table-column show-overflow-tooltip prop="signTime" label="签订日期"-->
<!--                                         ></el-table-column>-->
<!--                        <el-table-column show-overflow-tooltip prop="yxqTime" label="有效期起止"-->
<!--                                         ></el-table-column>-->
<!--                        <el-table-column show-overflow-tooltip prop="createName" label="创建人"-->
<!--                                         ></el-table-column>-->
<!--                        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间"-->
<!--                                         ></el-table-column>-->
<!--                        <el-table-column label="审核状态" width="100px">-->
<!--                            <template slot-scope="scope">-->
<!--                                <el-tag type="danger" round size="mini" plain v-if="scope.row.status == 1">未审核</el-tag>-->
<!--                                <el-tag type="success" round size="mini" plain v-else-if="scope.row.status == 2">已审核-->
<!--                                </el-tag>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
<!--                        <el-table-column show-overflow-tooltip prop="validByName" label="审核人"-->
<!--                                        ></el-table-column>-->
<!--                    </el-table>-->


                </div>
            </template>
        </keep-alive>
        <div class="page">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="queryall.totalNum"
                    :current-page="queryall.startpage"
                    :page-size="queryall.pagesize"
                    class="pagination-container"
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :page-sizes="[15, 20, 25, 30]"
            ></el-pagination>
        </div>

        <!-- 抽屉 -->
        <div>


            <el-dialog title="预览" :modal="false" :visible.sync="dialogVisible" :before-close="handleClose">
                <div>
                    <img :src="imgurl" style="width:100%;height:auto"/>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="downLoadFile(fileInfo)">下载</el-button>
            </span>
            </el-dialog>

            <!-- 新增合同 -->
            <div>
                <el-drawer
                        :title="title"
                        :visible.sync="newContract"
                        size="80%"
                        :before-close="visibleChange"
                >
                    <div class="demo-drawer__content" style="background-color: #ffffff">
                        <el-form
                                style="padding-left: 20px"
                                label-position="top"
                                :rules="formRule"
                                ref="addContractInfo"
                                label-width="130px"
                                class="demo-ruleForm"
                                :model="contractInfo"
                                size="small"

                        >
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="组织" prop="companyId">
                                        <el-select
                                                filterable
                                                multiple
                                                collapse-tags
                                                clearable
                                                placeholder="选择组织"
                                                v-model="contractInfo.companyId"
                                                ref="selectCompanyName"
                                                @change="getCompanyName"
                                                style="width:100%"
                                        >
                                            <el-option
                                                    v-for="(item, index) in companyList"
                                                    :key="item.companyId"
                                                    :label="item.companyName"
                                                    :value="item.companyId"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="有效期起止" prop="endStDate" v-if="!showSeagoing">
                                        <!-- <el-date-picker size="mini" type="date" format="yyyy年MM月dd日" value-format="yyyy/MM/dd" v-model="contractInfo.endStDate"
                                                             placeholder="选择日期" class="others">
                                                            </el-date-picker> -->
                                        <el-date-picker
                                                v-model="contractInfo.endStDate"
                                                type="daterange"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                style="width: 100%"
                                        ></el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="客户" prop="customerId">
                                        <el-select
                                                filterable
                                                clearable
                                                placeholder="选择客户"
                                                ref="selectCustomerName"
                                                v-model="contractInfo.customerId"
                                                @change="getcustomerName"
                                                style="width: 100%"
                                        >
                                            <el-option
                                                    v-for="(item, index) in customerList"
                                                    :key="item.customerId"
                                                    :label="item.customerName"
                                                    :value="item.customerId"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="合同编号" prop="contactNo">
                                        <el-input placeholder="请输入合同编号" style="width: 100%"
                                                  v-model="contractInfo.contactNo"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="业务类型" prop="busTypeCode">
                                        <el-select style="width: 100%" v-model="contractInfo.busTypeCode"
                                                   placeholder="请选择业务类型" @change="busTypeCodeChange">
                                            <el-option
                                                    v-for="item in options_busTypeCode"
                                                    :key="item.dictValue"
                                                    :label="item.dictLabel"
                                                    :value="item.dictValue"
                                            >
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="签订日期" prop="signTime">
                                        <el-date-picker
                                                style="width: 100%"
                                                type="date"
                                                value-format="yyyy/MM/dd"
                                                v-model="contractInfo.signTime"
                                                placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="账期天数" prop="paymentDays">
                                        <el-input placeholder="请输入账期天数" v-model="contractInfo.paymentDays"
                                                  style="width: 100%"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="合同类型" prop="contractType">
                                        <el-select v-model="contractInfo.contractType" style="width: 100%"
                                                   placeholder="请选择合同类型" @change="contractTypeChange">
                                            <el-option
                                                    v-for="item in options_contractType"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                            >
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" class="textareaText">
                                    <el-form-item label="免堆存天数" prop="freeStorageDays">
                                        <el-input placeholder="请输入免堆存天数" style="width: 100%"
                                                  v-model="contractInfo.freeStorageDays"/>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8" class="textareaText" v-if="isShipShow">
                                    <el-form-item label="是否船舶作业" prop="isShip">
                                        <el-radio-group v-model="contractInfo.isShip" @change="isShipChange">
                                            <el-radio value="Y" label="Y">是</el-radio>
                                            <el-radio value="N" label="N">否</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" v-if="shipvoyageIdShow">
                                    <el-form-item label="航次" prop="shipvoyageId">
                                        <el-select style="width: 100%" v-model="contractInfo.shipvoyageId"
                                                   clearable placeholder="请选择航次" ref="seletPort" @change="getShipvoyageName">
                                            <el-option
                                                    v-for="item in portList"
                                                    :key="item.shipvoyageId"
                                                    :label="item.shipvoyageName"
                                                    :value="item.shipvoyageId"
                                            >
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row>
                                <el-col :span="24" class="textareaText">
                                    <el-form-item label="合同描述">
                                        <!-- <el-input placeholder="请输入合同描述" size="mini" style="width: 750px" v-model="contractInfo.remark" /> -->
                                        <el-input

                                                maxlength="500"
                                                type="textarea"
                                                style="width: 50%"
                                                :autosize="{ minRows: 2, maxRows: 3 }"
                                                placeholder="请输入合同描述且最多500个字"
                                                v-model="contractInfo.remark"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-form-item label="附件" class="top">
                                    <Upload @changeFile="changeFile" :fileListEdit="businessLicenseList" />
<!--                                    <el-upload-->
<!--                                            class="upload-demo"-->
<!--                                            action=""-->
<!--                                            :http-request="file => handleBusinessLicense(file, '1')"-->
<!--                                            :on-remove="file => handleRemove(file, '1')"-->
<!--                                            :on-preview="handlePreview"-->
<!--                                            :file-list="fileList"-->
<!--                                    >-->
<!--                                        <el-button size="small" icon="el-icon-upload2" plain>点击上传</el-button>-->
<!--                                        <div slot="tip" class="el-upload__tip">支持扩展名：.txt .jpeg .doc .docx .pdf-->
<!--                                            .jpg...-->
<!--                                        </div>-->
<!--                                    </el-upload>-->
                                </el-form-item>
                            </el-row>
                        </el-form>

                        <!-- 费率标准 -->
                        <div style="margin-bottom: 5px">
                            <div class="search_form">
                                <div style="margin-left: 12px;margin-bottom:10px">费率标准</div>
                                <div>
                                    <el-tooltip class="item" content="新增" placement="top">
                                        <el-button size="mini" icon="el-icon-plus"
                                                   @click="showAddRowDetail()"></el-button>
                                    </el-tooltip>
                                </div>
                            </div>
                            <div class="contractTable" >
                                 <el-form :model="contractFrom"  ref="addContractInfo" style="padding:10px 10px;"  label-position="top">
                                    <el-table highlight-current-row height="200px" :data="contractFrom.detailedSettlementData" border   :row-class-name="tableRowClassName" @row-click="selectDetailed"  style="width: 100%;">
                                        <el-table-column label="组织" >
                                            <template slot-scope="scope">
                                                 <el-form-item label="" :prop="'detailedSettlementData.' + scope.$index + '.companyId'"  :rules="[{ required: true, message: '组织不能为空' }]">
                                                    <el-select
                                                            collapse-tags
                                                            clearable
                                                            placeholder="组织"
                                                            v-model="scope.row.companyId"
                                                            style="width:100%"
                                                            ref="companyListChange"
                                                            @change="companyListChange($event,scope.row)"
                                                    >
                                                        <el-option
                                                                v-for="(item) in companyList"
                                                                :key="item.companyId"
                                                                :label="item.companyName"
                                                                :value="item.companyId"
                                                        />
                                                    </el-select>
                                                 </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="费目">
                                            <template slot-scope="scope">
                                                <el-form-item label=""  :prop="'detailedSettlementData.' + scope.$index + '.rateItemCode'" :rules="[{ required: true, message: '费目不能为空' }]">
                                                    <el-select style="width:100%" filterable clearable placeholder="费目"
                                                               v-model="scope.row.rateItemCode" ref="rateItemChange" @change="rateItemChange($event,scope.row)">
                                                        <el-option
                                                                v-for="(item, index) in rateList"
                                                                :key="index"
                                                                :label="item.rateItemName"
                                                                :value="item.rateItemCode"
                                                        ></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="作业过程">
                                            <template slot-scope="scope">
                                                <el-form-item label="" :prop="'detailedSettlementData.' + scope.$index + '.processCode'" :rules="formRule.processCode">
                                                    <el-select
                                                            style="width:100%"
                                                            filterable
                                                            clearable
                                                            remote
                                                            placeholder="请输入"
                                                            v-model="scope.row.processCode"
                                                            class="process"
                                                            ref="processChange"
                                                            @change="processChange($event,scope.row)"
                                                    >
                                                        <el-option
                                                                v-for="(item, index) in processList"
                                                                :key="index"
                                                                :label="item.processName"
                                                                :value="item.processCode"
                                                        />
                                                    </el-select>
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="内外贸">
                                            <template slot-scope="scope">
                                                <el-form-item label=""  :prop="'detailedSettlementData.' + scope.$index + '.tradeType'" >
                                                    <el-select style="width:100%" filterable clearable placeholder="贸别"
                                                            v-model="scope.row.tradeType">
                                                        <el-option
                                                                v-for="(item, index) in tradeType"
                                                                :key="index"
                                                                :label="item.label"
                                                                :value="item.value"
                                                        ></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="货名">
                                            <template slot-scope="scope">
                                                <el-form-item
                                                        label=""
                                                         :prop="'detailedSettlementData.' + scope.$index + '.cargoCode'"
                                                        :rules="formRule.cargoCode"
                                                >
                                                    <el-select
                                                            filterable
                                                            clearable
                                                            placeholder="选择货名"
                                                            class="one"
                                                            style="width:100%"
                                                            v-model="scope.row.cargoCode"
                                                            @change="cargoChange($event,scope.row)"
                                                            ref="cargoChange"
                                                    >
                                                        <el-option
                                                                v-for="(item, index) in cargoList"
                                                                :key="index"
                                                                :label="item.cargoName"
                                                                :value="item.cargoCode"
                                                        ></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </template>
                                        </el-table-column>

                                        <el-table-column label="树种" v-if="dryShow">
                                            <template slot-scope="scope">
                                                <el-form-item label=""  :prop="'detailedSettlementData.' + scope.$index + '.treeSpeciesCode'" >
                                                    <el-select style="width:100%" filterable clearable placeholder="树种"
                                                               v-model="scope.row.treeSpeciesCode" @change="treeSpeciesChange($event,scope.row)"  ref="treeSpeciesChange">
                                                        <el-option
                                                                v-for="(item, index) in options_treeSpecies"
                                                                :key="index"
                                                                :label="item.dictLabel"
                                                                :value="item.dictValue"
                                                        ></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </template>
                                        </el-table-column>

                                        <el-table-column label="烘干类型" v-if="dryShow">
                                            <template slot-scope="scope">
                                                <el-form-item label=""  :prop="'detailedSettlementData.' + scope.$index + '.dryType'" >
                                                    <el-select style="width:100%" filterable clearable placeholder="烘干类型"
                                                               v-model="scope.row.dryType">
                                                        <el-option
                                                                v-for="(item, index) in options_dry"
                                                                :key="index"
                                                                :label="item.label"
                                                                :value="item.value"
                                                        ></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </template>
                                        </el-table-column>

                                        <el-table-column label="费率值">
                                            <template slot-scope="scope">
                                               <el-form-item label="" :prop="'detailedSettlementData.' + scope.$index + '.rate'"  :rules="[{ required: true, message: '费率值不能为空' }]">
                                                    <el-input style="width:100%"
                                                            placeholder="费率值"
                                                            v-model="scope.row.rate"
                                                            class="one"
                                                            @keyup.native="proving()"
                                                    ></el-input>
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="计费单位">
                                            <template slot-scope="scope">
                                                <el-form-item label=""  :prop="'detailedSettlementData.' + scope.$index + '.unitCode'" :rules="[{ required: true, message: '计费单位不能为空' }]">
                                                    <el-select filterable clearable placeholder="计费单位" style="width:100%"
                                                               v-model="scope.row.unitCode" class="one">
                                                        <el-option
                                                                v-for="(item, index) in billingList"
                                                                :key="index"
                                                                :label="item.dictLabel"
                                                                :value="item.dictValue"
                                                        ></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" fixed="right" width="80">
                                            <template slot-scope="scope">
                                                <el-link type="danger"
                                                         @click.native.prevent="deleteSettlementInfo(scope.$index, contractFrom.detailedSettlementData)">删除</el-link>
                                            </template>
                                        </el-table-column>

                                    </el-table>
                                </el-form>
                            </div>
                        </div>

                        <!-- 阶梯费率-->
                        <div  style="margin-bottom: 5px">
                            <div class="search_form">
                                <div style="margin-left: 12px;margin-bottom:10px;margin-top: 10px">阶梯费率</div>
                                <div>

                                    <el-tooltip class="item" content="新增" placement="top">
                                        <el-button size="mini" icon="el-icon-plus"
                                                   @click="showLadderRowDetail(1)"></el-button>
                                    </el-tooltip>
                                </div>
                            </div>
                            <div class="contractTable" >
                                <el-form :model="contractFrom" ref="ladderRef" style="padding:10px 10px;" :rules="formRuleLadder" label-position="top">
                                    <el-table highlight-current-row height="200px" :data="contractFrom.ladderData" border @row-click="selectLadderData" style="width: 100%;" :pagination="false"
                                              >
                                        <el-table-column label="起始量" >
                                            <template slot-scope="scope">
                                                <el-form-item label=""  :prop="'ladderData.' + scope.$index + '.startQuantity'" :rules="formRuleLadder.startQuantity">
                                                    <el-input
                                                            v-model="scope.row.startQuantity"
                                                            style="width:100%"
                                                            placeholder="起始量"
                                                    />
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="截至量">
                                            <template slot-scope="scope">
                                                <el-form-item label="" :prop="'ladderData.' + scope.$index + '.endQuantity'" :rules="formRuleLadder.endQuantity" >
                                                    <el-input
                                                            v-model="scope.row.endQuantity"
                                                            style="width:100%"
                                                            placeholder="截至量"
                                                    />
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="费率值" >
                                            <template slot-scope="scope">
                                                <el-form-item label=""  :prop="'ladderData.' + scope.$index + '.rate'" :rules="formRuleLadder.rate">
                                                    <el-input v-model="scope.row.rate" style="width:100%"
                                                              placeholder="费率值"
                                                              @keyup.native="provingPrice"/>
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" fixed="right" width="80">
                                            <template slot-scope="scope">
                                                <el-link type="danger"
                                                         @click.native.prevent="deleteLadderInfo(scope.$index, contractFrom.ladderData)">删除</el-link>
                                            </template>
                                        </el-table-column>

                                    </el-table>
                                </el-form>
                            </div>
                        </div>

                        <!-- 堆存费 -->
                        <div style="margin-bottom: 30px">
                            <div class="search_form">
                                <div style="margin-left: 12px;margin-bottom:10px;margin-top: 10px">堆存费</div>
                                <div>

                                    <el-tooltip class="item" content="新增" placement="top">
                                        <el-button size="mini" icon="el-icon-plus"
                                                   @click="showStackingRowDetail(1)"></el-button>
                                    </el-tooltip>

                                </div>
                            </div>

                            <div class="contractTable" >
                                <el-form :model="contractFrom" ref="storageFeeRef" style="padding:10px 10px;" :rules="formRule1" label-position="top">
                                    <el-table highlight-current-row :data="contractFrom.stackingData" border @row-click="selectStackingData" style="width: 100%;" :pagination="false"
                                              :tableHeight="200" height="180px">
                                        <el-table-column label="开始天数" >
                                            <template slot-scope="scope">
                                                <el-form-item label=""  :prop="'stackingData.' + scope.$index + '.storageBeginDays'" :rules="formRule1.storageBeginDays">
                                                    <el-input
                                                            v-model="scope.row.storageBeginDays"
                                                            style="width:100%"
                                                            placeholder="开始天数"
                                                            @keyup.native="provingPrice"
                                                            @input="stackingDetail.storageBeginDays = verifyfilter('number', stackingDetail.storageBeginDays)"
                                                    />
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="截至天数">
                                            <template slot-scope="scope">
                                                <el-form-item label="" :prop="'stackingData.' + scope.$index + '.storageEndDays'" :rules="formRule1.storageEndDays" >
                                                    <el-input
                                                            v-model="scope.row.storageEndDays"
                                                            style="width:100%"
                                                            placeholder="截至天数"
                                                            @keyup.native="provingPrice"
                                                            @input="stackingDetail.storageEndDays = verifyfilter('number', stackingDetail.storageEndDays)"
                                                    />
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="费率值" >
                                            <template slot-scope="scope">
                                                <el-form-item label=""  :prop="'stackingData.' + scope.$index + '.rate'" :rules="formRule1.rate">
                                                    <el-input v-model="scope.row.rate" style="width:100%"
                                                              placeholder="费率值"
                                                              @keyup.native="provingPrice"/>
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="计费单位">
                                            <template slot-scope="scope">
                                                <el-form-item label=""  :prop="'stackingData.' + scope.$index + '.unitCode'"  :rules="formRule1.unitCode">
                                                    <el-select style="width:100%" v-model="scope.row.unitCode" filterable
                                                               clearable placeholder="请选择">
                                                        <el-option
                                                                v-for="(item, index) in billingList"
                                                                :key="index"
                                                                :label="item.dictLabel"
                                                                :value="item.dictValue"
                                                        ></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" fixed="right" width="80">
                                            <template slot-scope="scope">
                                                <el-link type="danger"
                                                         @click.native.prevent="deleteStockpilingInfo(scope.$index, contractFrom.stackingData)">删除</el-link>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-form>
                            </div>
                        </div>

                        <div class="demo-drawer__footer" >
                            <el-button type="primary" size="mini" @click="saveContract" :loading="btnLoading">保 存
                            </el-button>
                        </div>
                    </div>
                </el-drawer>
            </div>


            <!-- 添加明细 -->
            <div class="box" v-if="addDetails">
                <el-drawer
                        :title="detailTitle"
                        :visible.sync="addDetails"
                        size="36%"
                        @visibleChange="visibleChange1"
                >
                    <div class="demo-drawer__content">
                        <el-form
                                label-position="right"
                                size="mini"
                                style="padding-bottom: 160px"
                                label-width="100px"
                                :rules="formRule"
                                ref="addDetails"
                                class="addDetails"
                                :model="contractDetail"
                        >
                            <el-row>
                                <el-col :span="18">
                                    <el-form-item label="组织" prop="companyId">
                                        <el-select
                                                collapse-tags
                                                clearable
                                                placeholder="组织"
                                                v-model="contractDetail.companyId"
                                                style="width:100%"

                                        >
                                            <el-option
                                                    v-for="(item, index) in companyList"
                                                    :key="item.companyId"
                                                    :label="item.companyName"
                                                    :value="item.companyId"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>

                                <el-col :span="18">
                                    <el-form-item
                                            label="货名"
                                            prop="cargoCode"
                                    >
                                        <el-select
                                                filterable
                                                clearable
                                                placeholder="选择货名"
                                                class="one"
                                                style="width:100%"
                                                v-model="contractDetail.cargoCode"
                                        >
                                            <el-option
                                                    v-for="(item, index) in cargoList"
                                                    :key="index"
                                                    :label="item.cargoName"
                                                    :value="item.cargoCode"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="18" class="el-form-item_margin">
                                    <el-form-item label="贸别" prop="tradeType ">
                                        <el-select style="width:100%" filterable clearable placeholder="贸别"
                                                   v-model="contractDetail.tradeType">
                                            <el-option
                                                    v-for="(item, index) in tradeType"
                                                    :key="index"
                                                    :label="item.label"
                                                    :value="item.value"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="18" class="el-form-item_margin">
                                    <el-form-item label="费目" prop="rateItemCode ">
                                        <el-select style="width:100%" filterable clearable placeholder="费目"
                                                   v-model="contractDetail.rateItemCode">
                                            <el-option
                                                    v-for="(item, index) in rateList"
                                                    :key="index"
                                                    :label="item.rateItemName"
                                                    :value="item.rateItemCode"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="18">
                                    <el-form-item label="费率值" prop="rate">
                                        <el-input style="width:100%"
                                                  placeholder="费率值"
                                                  v-model="contractDetail.rate"
                                                  class="one"
                                                  @keyup.native="proving()"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="18">
                                    <el-form-item label="作业过程" prop="processCode">
                                        <el-select
                                                style="width:100%"
                                                filterable
                                                clearable
                                                remote
                                                placeholder="请输入"
                                                v-model="contractDetail.processCode"
                                                class="process"
                                        >
                                            <el-option
                                                    v-for="(item, index) in processList"
                                                    :key="index"
                                                    :label="item.processName"
                                                    :value="item.processCode"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="18">
                                    <el-form-item label="计费单位" prop="unitCode">
                                        <el-select filterable clearable placeholder="计费单位" style="width:100%"
                                                   v-model="contractDetail.unitCode" class="one">
                                            <el-option
                                                    v-for="(item, index) in billingList"
                                                    :key="index"
                                                    :label="item.dictLabel"
                                                    :value="item.dictValue"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>

                        <div class="demo-drawer__footer" style="padding-bottom: 50px">
                            <el-button type="primary" size="mini" @click="validateContractDetail" :loading="btnLoading">保
                                存
                            </el-button>
                        </div>
                    </div>
                </el-drawer>
            </div>

            <!-- 堆存明细 -->
            <div class="box" v-if="stackingDetails">
                <el-drawer
                        :title="stackingTitle"
                        :visible.sync="stackingDetails"
                        size="35%"
                >
                    <div class="demo-drawer__content">
                        <el-form
                                label-position="right"
                                size="mini"
                                :rules="formRule1"
                                :model="stackingDetail"
                                ref="stackingDetail"
                                label-width="100px"
                                class="stackingDetails addDetails"
                        >
                            <el-row>
                                <el-col :span="18">
                                    <el-form-item label="开始天数" prop="storageBeginDays">
                                        <el-input
                                                v-model="stackingDetail.storageBeginDays"
                                                style="width:100%"
                                                @keyup.native="provingPrice"
                                                @input="stackingDetail.storageBeginDays = verifyfilter('number', stackingDetail.storageBeginDays)"
                                        />
                                    </el-form-item>
                                    <el-form-item label="截至天数" prop="storageEndDays">
                                        <el-input
                                                v-model="stackingDetail.storageEndDays"
                                                style="width:100%"
                                                @keyup.native="provingPrice"
                                                @input="stackingDetail.storageEndDays = verifyfilter('number', stackingDetail.storageEndDays)"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="18">
                                    <el-form-item label="费率值" prop="rate">
                                        <el-input v-model="stackingDetail.rate" style="width:100%"
                                                  @keyup.native="provingPrice"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="18">
                                    <el-form-item label="计费单位" prop="unitCode">
                                        <el-select style="width:100%" v-model="stackingDetail.unitCode" filterable
                                                   clearable placeholder="请选择">
                                            <el-option
                                                    v-for="(item, index) in billingList"
                                                    :key="index"
                                                    :label="item.dictLabel"
                                                    :value="item.dictValue"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                        </el-form>

                        <div class="demo-drawer__footer" style="padding-bottom: 50px">
                            <el-button type="primary" size="mini" @click="saveStackingDetail">保 存</el-button>
                        </div>
                    </div>
                </el-drawer>
            </div>

            <!-- 阶梯费率明细 -->
            <div class="box" v-if="ladderDetails">
                <el-drawer
                        :title="ladderTitle"
                        :visible.sync="ladderDetails"
                        size="35%"
                >
                    <div class="demo-drawer__content">
                        <el-form
                                label-position="right"
                                size="mini"
                                :rules="formRuleLadder"
                                :model="ladderDetail"
                                ref="ladderDetail"
                                label-width="100px"
                                class="stackingDetails addDetails"
                        >
                            <el-row>
                                <el-col :span="18">
                                    <el-form-item label="起始量" prop="startQuantity">
                                        <el-input
                                                v-model="ladderDetail.startQuantity"
                                                style="width:100%"
                                                @keyup.native="provingPrice"
                                                @input="ladderDetail.startQuantity = verifyfilter('number', ladderDetail.startQuantity)"
                                        />
                                    </el-form-item>
                                    <el-form-item label="截至量" prop="endQuantity">
                                        <el-input
                                                v-model="ladderDetail.endQuantity"
                                                style="width:100%"
                                                @keyup.native="provingPrice"
                                                @input="ladderDetail.endQuantity = verifyfilter('number', ladderDetail.endQuantity)"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="18">
                                    <el-form-item label="费率值" prop="rate">
                                        <el-input v-model="ladderDetail.rate" style="width:100%"
                                                  @keyup.native="provingPrice"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>


                        </el-form>

                        <div class="demo-drawer__footer" style="padding-bottom: 50px">
                            <el-button type="primary" size="mini" @click="saveladderDetail">保 存</el-button>
                        </div>
                    </div>
                </el-drawer>
            </div>

        </div>
    </div>
</template>

<script>
    import drawer from "@/components/BaseTable/drawer"
    import BaseTable from "@/components/BaseTable"
    import publicapi from '@/api/public/index'
    import config from '@/network/config.js'
    import axios from "axios";
    import Upload from '@/components/upload'

    const throttle = function (func, delay = 300) {
        let timer = null
        return function () {
            let context = this
            let args = arguments
            if (!timer) {
                timer = setTimeout(function () {
                    func.apply(context, args)
                    timer = null
                }, delay)
            }
        }
    }
    export default {
        name: "equipment",
        components: { BaseTable, Upload },
        props: {
            // loading:{
            // 	type:Boolean,
            // 	default:false
            // },
        },
        data() {
            return {
                agreetableHeight: window.innerHeight - 200,
                agentsList1: [],
                agentsList2: [],
                agentsList3: [],
                agentsList4: [],
                dryShow:false,
                isShipShow:false,
                shipvoyageIdShow:false,
                loading: false,
                fileInfo: null,
                detailedIndex:'',
                // checkdisabled:false,
                fileList: [],
                upLoadFileList: [],
                baseUrl: "",
                //计费单位
                options_unitCode: [],
                //开始时间小于结束时间
                startStDate: {
                    disabledDate: time => {
                        if (this.stackingDetail.endStDate) {
                            return time.getTime() >= new Date(this.stackingDetail.endStDate).getTime()
                        }
                    },
                },
                endStDate: {
                    disabledDate: time => {
                        if (this.stackingDetail.startStDate) {
                            return time.getTime() <= new Date(this.stackingDetail.startStDate).getTime() - 86400000
                        }
                    },
                },
                selectDetails: null,
                selectStacking: null,
                selectLadder: null,
                selectStackingJTJG: null,
                selectPrice: null,
                selectRowData: null,
                contractId: 0,
                //船名
                options_shipName: [],
                columns:[
                    {
                        prop: 'companyName',
                        label: '组织',
                        isShort:'true'
                    },
                    {
                        prop: 'contactNo',
                        label: '合同编号'
                    },
                    {
                        prop: 'customerName',
                        label: '客户',
                        isShort:'true'
                    },
                    {
                        prop: 'dictLabel',
                        label: '业务类型'
                    },
                    {
                        prop: 'contractType',
                        label: '合同类型',
                        render(h, params) {
                            if (params.row.contractType == '1') {
                                return h('el-tag', {
                                    props: {
                                        size: 'mini',
                                        type: 'success'
                                    },
                                    domProps: {
                                        innerHTML: '单笔合同'
                                    }
                                })
                            }
                            return h('el-tag', {
                                props: {
                                    size: 'mini',
                                    type: 'danger'
                                },
                                domProps: {
                                    innerHTML: '年度合同'
                                }
                            })
                        }
                    },
                    {
                        prop: 'signTime',
                        label: '签订日期'
                    },
                    {
                        prop: 'yxqTime',
                        label: '有效期起止'
                    },
                    {
                        prop: 'createName',
                        label: '创建人'
                    },
                    {
                        prop: 'createTime',
                        label: '创建时间'
                    },
                    {
                        prop: 'status',
                        label: '合同类型',
                        render(h, params) {
                            if (params.row.status == '1') {
                                return h('el-tag', {
                                    props: {
                                        size: 'mini',
                                        type: 'success'
                                    },
                                    domProps: {
                                        innerHTML: '未审核'
                                    }
                                })
                            }
                            return h('el-tag', {
                                props: {
                                    size: 'mini',
                                    type: 'danger'
                                },
                                domProps: {
                                    innerHTML: '已审核'
                                }
                            })
                        }
                    },
                    {
                        prop: 'validByName',
                        label: '审核人'
                    },
                ],
                //烘干类型
                options_dry:[
                    {
                        value: '1',
                        label: '半干材'

                    },
                    {
                        value: '2',
                        label: '湿材'

                    },
                ],
                //树种
                options_treeSpecies:[],
                //业务类型
                options_busTypeCode: [
                    {
                        value: '测试1',
                        label: '测试1'

                    },
                    {
                        value: '测试2',
                        label: '测试2'

                    },
                ],
                //合同类型
                options_contractType: [
                    {
                        value: '2',
                        label: '年度合同'

                    },
                    {
                        value: '1',
                        label: '单笔合同'

                    },
                ],
                priceformRule: {
                    zxlq: [
                        {
                            required: true,
                            message: "请输入装卸量起",
                            trigger: "blur",
                        },
                    ],
                    zxlz: [
                        {
                            required: true,
                            message: "请输入装卸量止",
                            trigger: "blur",
                        },
                    ],
                    yhjg: [
                        {
                            required: true,
                            message: "请输入优惠价格",
                            trigger: "blur",
                        },
                    ],
                    ladderPriceAccounts: [
                        {
                            required: true,
                            message: "请选择装卸结算费率",
                            trigger: "change",
                        },
                    ],
                },
                formRule: {
                    //表单验证
                    price: [
                        {
                            required: true,
                            message: "请输入价格",
                            trigger: "change,blur",
                        },
                    ],
                    signTime: [
                        {
                            required: true,
                            message: "请选择签订日期",
                            trigger: "change,blur",
                        },
                    ],
                    endStDates: [
                        {
                            required: true,
                            message: "请选择截至日期",
                            trigger: "change,blur",
                        },
                    ],
                    startStDate: [
                        {
                            required: true,
                            message: "请选择开始日期",
                            trigger: "change,blur",
                        },
                    ],
                    companyId: [
                        {
                            required: true,
                            message: "请选择组织",
                            trigger: ["change","blur"],
                        },
                    ],
                    customerId: [
                        {
                            required: true,
                            message: "请选择客户",
                            trigger: "change",
                        },
                    ],
                    endStDate: [
                        {
                            required: true,
                            message: "请选择截至日期",
                            trigger: "change,blur",
                        },
                    ],
                    busTypeCode: [
                        {
                            required: true,
                            message: "请选择业务类型",
                            trigger: "change",
                        },
                    ],
                    contactNo: [
                        {
                            required: true,
                            message: "请输入合同编号",
                            trigger: "change,blur",
                        },
                    ],

                    rate: [
                        {
                            required: true,
                            message: "请输入费率值",
                            trigger: ["change","blur"],
                        },
                    ],
                    unitCode: [
                        {
                            required: true,
                            message: "请选择计费单位",
                            trigger: ["change","blur"],
                        },
                    ],

                    inoutType: [
                        {
                            required: true,
                            message: "请选择进出口",
                           trigger: ["change","blur"],
                        },
                    ],
                    paymentDays: [
                        {
                            required: true,
                            message: "请输入账期天数",
                            trigger: "change,blur",
                        },
                    ],
                    contractType: [
                        {
                            required: true,
                            message: "请选择合同类型",
                            trigger: "change",
                        },
                    ],

                    freeStorageDays: [
                        {
                            required: true,
                            message: "请输入免堆存天数",
                            trigger: "change",
                        },
                    ],
                    cargoCode: [
                        {
                            required: true,
                            message: "请选择货名",
                            trigger: "change",
                        },
                    ],
                    tradeType: [
                        {
                            required: true,
                            message: "请选择贸别",
                            trigger: ["change","blur"],
                        },
                    ],
                    rateItemCode: [
                        {
                            required: true,
                            message: "请选择费目",
                            trigger: ["change","blur"],
                        },
                    ],
                    
                },
                formRule1: {
                    //表单验证

                    storageBeginDays: [
                        {
                            required: true,
                            message: "请输入开始天数",
                            trigger: "blur",
                        },
                    ],
                    storageEndDays: [
                        {
                            required: true,
                            message: "请输入截止天数",
                            trigger: "blur",
                        },
                    ],
                    unitCode: [
                        {
                            required: true,
                            message: "请选择计费单位",
                            trigger: "blur",
                        },
                    ],
                    rate: [
                        {
                            required: true,
                            message: "请输入费率值",
                            trigger: "blur",
                        },
                    ],
                },
                formRuleLadder: {
                    //表单验证

                    startQuantity: [
                        {
                            required: true,
                            message: "请输入起始量",
                            trigger: "blur",
                        },
                    ],
                    endQuantity: [
                        {
                            required: true,
                            message: "请输入截至量",
                            trigger: "blur",
                        },
                    ],
                    rate: [
                        {
                            required: true,
                            message: "请输入费率值",
                            trigger: "blur",
                        },
                    ],
                },
                businessLicenseList: [],
                activeName: "first",
                isFirst: true,
                title: "新增合同信息",
                agreementTitle: "新增补充协议信息",
                detailTitle: "添加明细",
                stackingTitle: "堆存明细",
                ladderTitle: "阶梯费率明细",
                showOrHidden: false,
                searchForm: {
                    //搜索条件
                    customerId: "",
                    contactNo: "",
                    companyId: "",
                    date: "",
                },
                parentId: "", //新增补充协议时父级合同ID
                selectParent: "",
                selectAgreement: "",
                contractInfo: {}, //合同信息
                agreementInfo: {}, //协议信息
                workComps: [], //作业公司
                dialogVisible: false,
                imgurl: '',
                tradeType: [
                    {
                        value: '内贸',
                        label: '内贸'
                    },
                    {
                        value: '外贸',
                        label: '外贸'
                    },
                ], //贸别
                cargoClass: [], //货类
                cargoType: [], //货种
                tradeFlag: [], //进出口
                costType: [], //计费类型
                contractDetail: {}, //合同明细 新增/修改
                agents: [], //客户
                customers: [], //补充协议的客户
                billPlans: [], //方式 体积重量件数
                cargoNames: [], //货名集合
                containFees: [], //包含项目集合
                checkContainFee: [], //选中的项目集合
                stackingDetail: {feeDays: 30}, //堆存明细 新增/修改
                ladderDetail: {}, //阶梯费率明细 新增/修改
                priceDetail: {}, //堆存明细 新增/修改
                priceDetails: false,
                dialog: false,
                contractDetails: false,
                queryall: {
                    totalNum: 10,
                    startpage: 1,
                    pagesize: 15,
                },
                queryallAgreement: {
                    totalNum: 10,
                    startpage: 1,
                    pagesize: 15,
                },
                tableData: [],
                contractFrom:{
                    detailedSettlementData: [], //合同明细计算信息
                    stackingData: [], //合同堆存明细信息
                    ladderData: [] //阶梯费率信息
                },
             
                settlementData: [], //补充协议明细结算信息
                detailedSettlementColumns: [
                    {
                        prop: "companyName",
                        label: "组织",
                        width: "200px",
                    },
                    {
                        prop: "tradeType",
                        label: "内外贸",
                    },
                    {
                        prop: "cargoName",
                        label: "货名",
                    },
                    {
                        prop: "unitCode",
                        label: "计费单位",
                    },
                    {
                        prop: "rate",
                        label: "费率值",
                    },
                    {
                        prop: "processName",
                        label: "作业过程",
                    },
                    {
                        prop: "rateItemName",
                        label: "费目",
                    }
                ],
                stackingData: [], //合同堆存明细信息
                stackData: [], //补充协议堆存明细
                stackingColumns: [
                    {
                        prop: "storageBeginDays",
                        label: "开始",
                        width: "100px",
                    },
                    {
                        prop: "storageEndDays",
                        label: "截至",
                        width: "100px",
                    },
                    {
                        prop: "rate",
                        label: "费率值",
                    },
                    {
                        prop: "unitCode",
                        label: "计费单位",
                    }

                ],
                stackingDataJTJG: [], //合同 堆存包干方式2
                stackDataJTJG: [],
                stackingColumnsJTJG: [
                    {
                        prop: "startDays",
                        label: "开始",
                        width: "100px",
                    },
                    {
                        prop: "endDays",
                        label: "截至",
                        width: "100px",
                    },
                    // {
                    // 	prop: "startStDate",
                    // 	label: "开始日期",
                    // },
                    // {
                    // 	prop: "endStDate",
                    // 	label: "截至日期",
                    // },
                    {
                        prop: "price",
                        label: "价格",
                    },
                    {
                        prop: "feeDays",
                        label: "免堆期（天数）",
                    },
                    {
                        prop: "remark",
                        label: "堆存描述",
                    },
                ],

                priceData: [], //阶梯价格
                priceColumns: [
                    {
                        prop: "zxlq",
                        label: "装卸量起（吨）",
                    },
                    {
                        prop: "zxlz",
                        label: "装卸量止（<=吨）",
                    },
                    {
                        prop: "yhjg",
                        label: "优惠价格（元/吨）",
                    },
                    {
                        prop: "ladderPriceAccounts",
                        label: "装卸结算费率",
                        render: (h, params) => {
                            let label = []
                            let accountsIdList = []
                            if (this.newAgreement) {
                                accountsIdList = JSON.parse(JSON.stringify(this.settlementData))
                            } else {
                                accountsIdList = JSON.parse(JSON.stringify(this.contractFrom.detailedSettlementData))
                            }
                            if (params.row.ladderPriceAccounts) {
                                if (params.row.ladderPriceAccounts.length != 0) {
                                    accountsIdList.map((item, index) => {
                                        params.row.ladderPriceAccounts.map((childItem, childIndex) => {
                                            if (childItem.onlyTime == item.onlyTime) {
                                                label.push(
                                                    item.tradeTypeName +
                                                    (item.cargoName ? "-" + item.cargoName : "") +
                                                    "-" +
                                                    item.billPlanName +
                                                    "-" +
                                                    item.localCharge
                                                )
                                            }
                                        })
                                    })
                                }
                            }
                            return h("div", {
                                domProps: {
                                    innerHTML: label,
                                },
                            })
                        },
                    },
                ],
                agreementData: [],
                agreementColumns: [
                    {
                        prop: "contractNo",
                        label: "合同编号",
                        width: "150px",
                    },
                    {
                        prop: "companyName",
                        label: "所属公司",
                    },
                    // {
                    // 	prop: "newstartEndDate",
                    // 	label: "有效期起止",
                    // },
                    {
                        prop: "signDate",
                        label: "签订日期",
                    },
                    {
                        prop: "customerName",
                        label: "客户",
                    },
                    {
                        prop: "invoiceTitle",
                        label: "发票抬头",
                    },
                ],
                agreementDetails: false,
                addDetails: false,
                stackingDetails: false,
                ladderDetails: false,
                newContract: false,
                newAgreement: false,
                index: 1, //1 新增合同 2编辑合同
                agreemetFlag: 1, // 1 新增补充协议 2修改补充协议 3.合同详情里修改补充协议
                stackingIndex: 1, //1合同添加明细 2合同修改 3补充协议新增  4.补充协议修改
                priceIndex: 1, //1合同添加明细 2合同修改 3补充协议新增  4.补充协议修改
                detailIndex: 1, //1合同添加明细 2合同修改 3补充协议新增  4.补充协议修改
                rowData: "", //选中行数据
                btnLoading: false,
                heightSize: 0,
                oldData: {},
                menuArr: [],
                agentPageNum1: 1,
                agentTotalPageNum1: "",
                agentQuery1: "",
                agentPageNum2: 1,
                agentTotalPageNum2: "",
                agentQuery2: "",
                agentPageNum3: 1,
                agentTotalPageNum3: "",
                agentQuery3: "",
                agentPageNum4: 1,
                agentTotalPageNum4: "",
                agentQuery4: "",
                showSeagoing: false, // 新增时是否展示海轮下拉框
                // showWorkOffer: false, // 新增时是否展示作业通知单字段
                shipSeagoingData: [], // 海轮预报下拉框数据
                agreementColumnsNew: [], // 补充协议表格
                accountsIdList: [],
                // sessionList: [],
                copyFlag: false,
                // auditorData: {},
                cusTypeList: [],
                //业务单元
                companyList: [],
                //客户
                customerList: [],
                //航次
                portList: [],
                //货名
                cargoList: [],
                //费目
                rateList: [],
                //计费单位
                billingList: [],
                //作业过程
                processList: [],
                departmentIds: [],
                departmentNames: [],
                mattachmentInfoList: [],
                //阶梯费率显示于隐藏
                ladderShow:false,
            }
        },
        beforeMount() {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            this.curHeight = h - 230
        },
        computed: {
            tableHeight: function () {
                return this.$store.state.tableHeight - this.heightSize
            },
        },
        mounted() {
        },
        created() {
            this.getCompanyList()
            this.getProtList()
            this.getlistCustomer()
            this.getListCargo()
            this.getlistRateItem()
            this.getlistProcess()
            this.getlistBillingUnit()
            this.getlistTreeSpecies()
            this.getlistBusType()
        },

        methods: {
            //获取客户
            getlistCustomer() {
                publicapi.getlistCustomer().then(res => {
                    this.customerList = res.data.data
                })
            },

            //获取航次
            getProtList() {
                publicapi.getListShipvoyage().then(res => {

                    this.portList = res.data.data
                    console.log("---航次----")
                    console.log(this.portList)
                })
            },

            //获取业务单元
            getCompanyList() {
                publicapi.getListComp().then(res => {
                    this.companyList = res.data.data
                })
            },

            //获取货名
            getListCargo() {
                publicapi.getListCargo().then(res => {
                    this.cargoList = res.data.data
                })
            },

            //获取费目
            getlistRateItem() {
                publicapi.getlistRateItem().then(res => {
                    this.rateList = res.data.data
                })
            },

            //获取计费单位
            getlistBillingUnit() {
                publicapi.getDictData('BILLING_UNIT').then(res => {
                    this.billingList = res.data.data.BILLING_UNIT

                })
            },

            //获取业务类型
            getlistBusType() {
                publicapi.getDictData('BUSINESS_TYPE').then(res => {
                    this.options_busTypeCode = res.data.data.BUSINESS_TYPE

                })
            },

            //获取树种
            getlistTreeSpecies() {
                publicapi.getDictData('TREETYPE').then(res => {
                    this.options_treeSpecies = res.data.data.TREETYPE

                })
            },

            //获取作业过程
            getlistProcess() {
                publicapi.getlistProcess({mainType: 1}).then(res => {
                    this.processList = res.data.data
                })
            },

            //合同类型change事件
            contractTypeChange(){
                if(this.contractInfo.contractType == '1'){
                    //单笔合同
                    this.isShipShow = true

                }else{
                    this.isShipShow = false
                    this.shipvoyageIdShow = false
                    this.contractInfo.isShip = ''
                    this.contractInfo.shipvoyageId = ''
                    this.contractInfo.shipName = ''
                    this.contractInfo.voyage = ''
                }
            },

            //船舶作业change事件
            isShipChange(){
                if(this.contractInfo.isShip == 'Y'){
                    this.shipvoyageIdShow = true
                }else{
                    this.shipvoyageIdShow = false
                    this.contractInfo.shipvoyageId = ''
                    this.contractInfo.shipName = ''
                    this.contractInfo.voyage = ''
                }
            },

            //业务类型change事件(控制烘干属性)
            busTypeCodeChange(){

                if(this.contractInfo.busTypeCode == '05'){
                    this.dryShow = true

                }else{
                    this.dryShow = false
                    this.contractFrom.detailedSettlementData.forEach((v, index) => {
                       if(v.treeSpeciesCode){
                           v.treeSpeciesCode = ''
                       }
                        if(v.treeSpeciesName){
                            v.treeSpeciesName = ''
                        }
                        if(v.dryType){
                            v.dryType = ''
                        }
                    })
                }
                console.log(this.contractFrom.detailedSettlementData)
            },

            /**
             * 修改文件
             */
            changeFile(fileList, val, item) {
                this.businessLicenseList = fileList
                if (this.businessLicenseList && this.businessLicenseList.length > 0) {
                    this.businessLicenseList.forEach(v => {
                        v.fileType = item
                    })
                }
            },

            /**
             * @Author: chenfs
             * @description: 取消审核
             * @return {*}
             */
            contracTranferClose() {
                var dataid = {
                    id: this.contractId,
                }
                if (this.contractId == 0 || this.contractId == undefined) {
                    this.$message.error("请先选择")
                    return
                } else if (this.flag == 1) {
                    this.$message.error("此条信息未审核，请先进行审核操作！")
                    return
                }
                this.$confirm("此操作将进行取消审核, 是否继续取消审核?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    // type: 'warning'
                })
                    .then(() => {
                        this.$http
                            .put(`/${this.$ServiceName}/api/external/operationContract/auditer`, dataid)
                            .then(res => {
                                if (res.data.success) {
                                    this.$message.success("取消审核成功")
                                }
                                this.contractId = null
                                this.getoutMessageList()
                            })
                            .catch(error => {
                            })
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消操作",
                        })
                    })
            },
            visibleChange(done) {
                this.$confirm('数据为保存,确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            visibleChange1(value) {
                this.addDetails = value
                this.stackingDetails = value
                this.priceDetails = value
            },
            refreshAgentsList(query, targetListName, query1, page, total) {
                this[query1] = query
                this[targetListName] = []
                this[page] = 1
                throttle(this.getAgentsList({keyword: query}, targetListName, page, total))
            },
            getAgentsList({keyword = "", id = ""} = {}, targetListName, page, total) {
                this.$http
                    .get(
                        `/${this.$ServiceName}/api/external/protected/customer/relevance/listcompany?keyword=${keyword}&id=${id}&startpage=${this[page]}&pagesize=20`
                    )
                    .then(res => {
                        this[targetListName] = this[targetListName].concat(res.data.data.pages)
                        this[total] = res.data.data.totalPageNum
                    })
                    .catch(error => {
                    })
            },

            //客户名称
            getcustomerName() {
                this.$nextTick(() => {
                    this.contractInfo.customerName = this.$refs.selectCustomerName.selected.label
                })
            },

            //船舶名称
            getShipvoyageName() {
                this.$nextTick(() => {
                    const label = this.$refs.seletPort.selected.label
                    if(label != undefined && label != null){
                       let arr =  label.split("_");
                        this.contractInfo.shipName = arr[0]
                        this.contractInfo.voyage = arr[1]
                    }

                })
            },

            //单元代码和名称
            getCompanyName(val) {
                this.departmentIds = [] //初始化数据
                this.departmentNames = [] //初始化数据
                for (let i = 0; i <= val.length - 1; i++) {
                    this.companyList.find((item) => { //这里的options就是数据源
                        if (item.companyId == val[i]) {
                            this.departmentIds.push(item.companyId) //这里的value我改成了id
                            this.departmentNames.push(item.companyName) //这里的label我改成了roleName
                        }
                    });
                }
            },

            companyListChange(val,row){
                this.$nextTick(() => {
                    row.companyName = this.$refs.companyListChange.selected.label
                })
            },

            rateItemChange(val,row){
                this.$nextTick(() => {
                    row.rateItemName = this.$refs.rateItemChange.selected.label
                })
            },

            processChange(val,row){
                this.$nextTick(() => {
                    row.processName = this.$refs.processChange.selected.label
                })
            },

            cargoChange(val,row){
                this.$nextTick(() => {
                    row.cargoName = this.$refs.cargoChange.selected.label
                })
            },

            treeSpeciesChange(val,row){
                this.$nextTick(() => {
                    row.treeSpeciesName = this.$refs.treeSpeciesChange.selected.label
                })
            },
            /**
             * 上传附件
             */
            handleBusinessLicense(params, type) {
                const file = params.file;
                const FormDatas = new FormData()
                FormDatas.append('fileArray', file)
                FormDatas.append('businessType', '04'); // 文件夹名称
                publicapi.getFileInfo(FormDatas).then(res => {
                    if (res.data.code == '0000') {
                        this.$message.success('上传成功')
                        const data = res.data.data

                        data.forEach(v => {
                            this.fileList.push(
                                {
                                    id: v.fileId,
                                    name: v.fileName
                                }
                            )
                            this.mattachmentInfoList.push(
                                {
                                    fileId: v.fileId,
                                    fileName: v.fileName,

                                }
                            )
                        })
                    } else {
                        this.$message.error('上传失败')
                    }

                })
            },


            proving(e) {
                //输入限制为小数点后三位
                // 先把非数字的都替换掉，除了数字和.
                this.contractDetail.localCharge = this.contractDetail.localCharge.replace(/[^\d.]/g, "")
                // 必须保证第一个为数字而不是.
                this.contractDetail.localCharge = this.contractDetail.localCharge.replace(/^\./g, "")
                // 保证只有出现一个.而没有多个.
                this.contractDetail.localCharge = this.contractDetail.localCharge.replace(/\.{2,}/g, "")
                // 保证.只出现一次，而不能出现两次以上
                this.contractDetail.localCharge = this.contractDetail.localCharge.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".")
                let index = -1
                for (let i in this.contractDetail.localCharge) {
                    if (this.contractDetail.localCharge[i] === ".") {
                        index = i
                    }
                    if (index !== -1) {
                        if (i - index > 3) {
                            this.contractDetail.localCharge = this.contractDetail.localCharge.substring(
                                0,
                                this.contractDetail.localCharge.length - 1
                            )
                            return this.$message.error("最多只能输入三位小数！")
                        }
                    }
                }
            },
            provingPrice(e) {
                //输入限制为小数点后三位
                // 先把非数字的都替换掉，除了数字和.
                this.stackingDetail.price = this.stackingDetail.price.replace(/[^\d.]/g, "")
                // 必须保证第一个为数字而不是.
                this.stackingDetail.price = this.stackingDetail.price.replace(/^\./g, "")
                // 保证只有出现一个.而没有多个.
                this.stackingDetail.price = this.stackingDetail.price.replace(/\.{2,}/g, "")
                // 保证.只出现一次，而不能出现两次以上
                this.stackingDetail.price = this.stackingDetail.price.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".")
                let index = -1
                for (let i in this.stackingDetail.price) {
                    if (this.stackingDetail.price[i] === ".") {
                        index = i
                    }
                    if (index !== -1) {
                        if (i - index > 3) {
                            this.stackingDetail.price = this.stackingDetail.price.substring(0, this.stackingDetail.price.length - 1)
                            return this.$message.error("最多只能输入三位小数！")
                        }
                    }
                }
            },

            pageChange(val) {
                this.queryall.startpage = val
                this.getoutMessageList()
            },
            sizeChange(val) {
                this.queryall.pagesize = val
                this.getoutMessageList()
            },
            resetSearch() {
                this.searchForm.customerId = ""
                this.searchForm.companyCode = ""
                this.searchForm.contractNo = ""
                this.searchForm.date = ""
                this.queryall.startpage = 1
            },
            async getoutMessageList() {
                this.contractId = null
                this.parentId = null
                this.selectRowData = null
                this.loading = true
                //取消选中的高亮行
                if (this.$refs.contractTable) this.$refs.contractTable.setCurrentRow()

                await this.$http
                    .get(
                        `/${this.$ServiceName}/api/external/operationContract/queryall?startpage=${this.queryall.startpage}&pagesize=${this.queryall.pagesize}&companyId=${this.searchForm.companyId}&contactNo=${this.searchForm.contactNo}&customerId=${this.searchForm.customerId}`
                    )
                    .then(res => {

                        this.queryall.totalNum = res.data.data.totalNum
                        this.queryall.startpage = res.data.data.pageNum
                        let data = []
                        data = res.data.data.pages
                        // if (data.length) {
                        //   data.map(item => {
                        //     if (item.children.length) {
                        //       item.children.map(itemC => {
                        //         itemC.contractType = item.contractType
                        //       })
                        //     }
                        //   })
                        // }
                        this.tableData = data

                        this.loading = false
                    })
                    .catch(error => {
                        this.loading = false
                    })
            },
            // 删除阶梯费率
            deleteLadderInfo(index, rows) {
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    rows.splice(index, 1);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
                this.contractFrom.detailedSettlementData[this.detailedIndex].ladderData = this.contractFrom.ladderData
                console.log( this.contractFrom.detailedSettlementData)
            },


            // 删除标准费率
            deleteSettlementInfo(index, rows) {
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    rows.splice(index, 1);
                     this.contractFrom.ladderData = []
                     this.selectDetails = null
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },

            // 删除堆存费
            deleteStockpilingInfo(index, rows) {
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    rows.splice(index, 1);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },


            //高级查询
            showOther() {
                this.showOrHidden = !this.showOrHidden
                this.showOrHidden ? (this.heightSize += 50) : (this.heightSize -= 50)
            },
            //保存堆存明细
            saveStackingDetail() {
                this.$refs.stackingDetail.validate(async valid => {
                    if (valid) {
                        this.stackingDetail.remark = this.stackingDetail.remark == undefined ? "" : this.stackingDetail.remark
                        if (this.stackingIndex == 1) {
                            if (this.stackingTitle.includes("方式2")) {
                                this.stackingDataJTJG.push(JSON.parse(JSON.stringify(this.stackingDetail)))
                            } else {
                                this.contractFrom.stackingData.push(JSON.parse(JSON.stringify(this.stackingDetail)))
                            }
                        } else if (this.stackingIndex == 2) {
                            if (this.stackingTitle.includes("方式2")) {
                                this.stackingDataJTJG.splice(this.selectStackingJTJG.index, 1, JSON.parse(JSON.stringify(this.stackingDetail)))
                            } else {
                                this.contractFrom.stackingData.splice(this.selectStacking.index, 1, JSON.parse(JSON.stringify(this.stackingDetail)))
                            }
                        } else if (this.stackingIndex == 3) {
                            if (this.stackingTitle.includes("方式2")) {
                                this.stackDataJTJG.push(JSON.parse(JSON.stringify(this.stackingDetail)))
                            } else {
                                this.stackData.push(JSON.parse(JSON.stringify(this.stackingDetail)))
                            }
                        } else if (this.stackingIndex == 4) {
                            if (this.stackingTitle.includes("方式2")) {
                                this.stackDataJTJG.splice(this.selectStackingJTJG.index, 1, JSON.parse(JSON.stringify(this.stackingDetail)))
                            } else {
                                this.stackData.splice(this.selectStacking.index, 1, JSON.parse(JSON.stringify(this.stackingDetail)))
                            }
                        }
                        this.stackingDetails = false
                    } else {
                        this.$message.error("表单验证失败")
                    }
                    this.selectStacking = null
                    this.selectStackingJTJG = null
                })
            },

            //合同明细
            saveContractDetail() {
                this.$refs.rateStandardRef.validate(async valid => {
                    if (valid) {

                        //组织
                        if (this.contractDetail.companyId) {
                            let company = this.companyList.filter(j => j.companyId == this.contractDetail.companyId)
                            this.contractDetail.companyName = company[0].companyName
                        }

                        //货名
                        if (this.contractDetail.cargoCode) {
                            let cargo = this.cargoList.filter(j => j.cargoCode == this.contractDetail.cargoCode)
                            this.contractDetail.cargoName = cargo[0].cargoName
                        }

                        //费目
                        if (this.contractDetail.rateItemCode) {
                            let cargo = this.rateList.filter(j => j.rateItemCode == this.contractDetail.rateItemCode)
                            this.contractDetail.rateItemName = cargo[0].rateItemName
                        }

                        //作业过程
                        if (this.contractDetail.processCode) {
                            let cargo = this.processList.filter(j => j.processCode == this.contractDetail.processCode)
                            this.contractDetail.processName = cargo[0].processName
                        }

                        this.contractDetail.containFee = this.checkContainFee.join(",")
                        if (this.detailIndex == 1) {
                            this.contractFrom.detailedSettlementData.push(JSON.parse(JSON.stringify(this.contractDetail)))
                        } else if (this.detailIndex == 2) {
                            this.contractFrom.detailedSettlementData.splice(this.selectDetails.index, 1, JSON.parse(JSON.stringify(this.contractDetail)))
                        } else if (this.detailIndex == 3) {
                            this.settlementData.push(JSON.parse(JSON.stringify(this.contractDetail)))
                        } else if (this.detailIndex == 4) {
                            this.settlementData.splice(this.selectDetails.index, 1, JSON.parse(JSON.stringify(this.contractDetail)))
                        }
                        this.addDetails = false
                        this.selectDetails = null
                    }
                })
            },
            // validateContractDetail(){
            //     this.$refs.rateStandardRefAdd.validate(async valid => {
            //         if (valid) {
            //             this.contractFrom.detailedSettlementData.filter((item,index)=>{
            //                 //组织
            //                 if (item.companyId) {
            //                     let company = this.companyList.filter(j => j.companyId == item.companyId)
            //                     item.companyName = company[0].companyName
            //                 }
            //                     //货名
            //                 if (item.cargoCode) {
            //                     let cargo = this.cargoList.filter(j => j.cargoCode == item.cargoCode)
            //                     item.cargoName = cargo[0].cargoName
            //                 }
            //
            //                 //费目
            //                 if (item.rateItemCode) {
            //                     let cargo = this.rateList.filter(j => j.rateItemCode == item.rateItemCode)
            //                     item.rateItemName = cargo[0].rateItemName
            //                 }
            //
            //                 //作业过程
            //                 if (item.processCode) {
            //                     let cargo = this.processList.filter(j => j.processCode == item.processCode)
            //                     item.processName = cargo[0].processName
            //                 }
            //
            //                 //树种
            //                 if (item.treeSpeciesCode) {
            //                     let cargo = this.options_treeSpecies.filter(j => j.dictValue == item.treeSpeciesCode)
            //                     console.log("111")
            //                     console.log(cargo)
            //                     item.treeSpeciesName = cargo[0].dictLabel
            //                 }
            //
            //
            //             })
            //
            //             this.contractDetail.containFee = this.checkContainFee.join(",")
            //             if (this.detailIndex == 1) {
            //                 this.$set('contractDetail','index',this.selectDetails.index++)
            //                 this.contractFrom.detailedSettlementData.push(JSON.parse(JSON.stringify(this.contractDetail)))
            //             } else if (this.detailIndex == 2) {
            //                 this.contractFrom.detailedSettlementData.splice(this.selectDetails.index, 1, JSON.parse(JSON.stringify(this.contractDetail)))
            //             }else if (this.detailIndex == 3) {
            //             this.settlementData.push(JSON.parse(JSON.stringify(this.contractDetail)))
            //             } else if (this.detailIndex == 4) {
            //                 this.settlementData.splice(this.selectDetails.index, 1, JSON.parse(JSON.stringify(this.contractDetail)))
            //             }
            //             this.addDetails = false
            //             // this.selectDetails = null
            //         }
            //     })
            // },
            //提交合同信息 1新增 2修改
            saveContract() {
                if (this.index == 1) {
                    // this.validateContractDetail()
                    this.$refs.storageFeeRef.validate(valid=>{
                            if(valid){
                                    this.addContrat()
                            }
                    })
                } else {
                    
                    // this.validateContractDetail()
                    this.$refs.storageFeeRef.validate(valid=>{
                            if(valid){
                                  this.editContrat()
                            }
                    })
                }
            },
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then(_ => {
                        done()
                    })
                    .catch(_ => {
                    })
            },

            // 文件预览
            handlePreview(file) {
                this.fileInfo = file
                if (file.name.indexOf('jpg') != -1 || file.name.indexOf('png') != -1 || file.name.indexOf('jpeg') != -1) {

                    axios({
                        method: 'get',
                        url: `${config.ConfigBaseURL}/wfpms-master-service/api/external/publics/file/down?id=${file.id}`,
                        responseType: 'blob',
                        params: {
                            token: window.sessionStorage.getItem('token')
                        }
                    }).then(res => {
                        const blob = new Blob([res.data], {
                            type: 'application/png;charset=utf-8'
                        });
                        const url = window.URL.createObjectURL(blob);
                        this.imgurl = url
                        this.dialogVisible = true
                    })
                } else {
                    this.downLoadFile(file)
                }
            },

            // 文件下载
            downLoadFile(file) {
                axios({
                    method: 'get',
                    url: `${config.ConfigBaseURL}/wfpms-master-service/api/external/publics/file/down?id=${file.id}`,
                    responseType: 'arraybuffer',
                    params: {
                        token: window.sessionStorage.getItem('token')
                    }
                }).then(res => {

                    const content = res.data
                    const blob = new Blob([content]) // 构造一个blob对象来处理数据
                    const link = document.createElement('a') // 创建a标签
                    link.download = file.name // a标签添加属性
                    link.style.display = 'none'
                    link.href = URL.createObjectURL(blob, {
                        type: `application/pdf`
                    })
                    document.body.appendChild(link)
                    link.click() // 执行下载
                    URL.revokeObjectURL(link.href) // 释放url
                    document.body.removeChild(link) // 释放标签
                }).catch((error) => {

                })
            },

            //添加合同信息
            addContrat() {
                // this.fileList = new Array();
                // this.upLoadFileList = new Array();

                this.$refs.addContractInfo.validate(async valid => {
                    if (valid) {
                        let listRate = this.contractFrom.detailedSettlementData
                        let stackingCory = JSON.parse(JSON.stringify(this.contractFrom.stackingData))

                        let companyId = ""
                        let companyName = ""
                        for (let i = 0; i < this.departmentIds.length; i++) {
                            companyId += this.departmentIds[i] + ","
                        }
                        for (let i = 0; i < this.departmentNames.length; i++) {
                            companyName += this.departmentNames [i] + ","
                        }
                        companyId = companyId.substring(0, companyId.length - 1)
                        companyName = companyName.substring(0, companyName.length - 1)
                        //开始时间
                        let date = new Date(this.contractInfo.endStDate[0])
                        let date_value = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate()
                        //截止时间
                        let date1 = new Date(this.contractInfo.endStDate[1])
                        let date_value1 = date1.getFullYear() + "/" + (date1.getMonth() + 1) + "/" + date1.getDate()
                        this.mattachmentInfoList = []
                        this.businessLicenseList.forEach(item=>{
                            this.mattachmentInfoList.push(item)
                        })
                        var data = {
                            listRate: listRate,
                            listStorage: stackingCory,
                            //合同编号
                            contactNo: this.contractInfo.contactNo,
                            //业务单元
                            companyId: companyId,
                            companyName: companyName,
                            //客户名称
                            customerId: this.contractInfo.customerId,
                            //客户代码
                            customerName: this.contractInfo.customerName,
                            //签订日期
                            signTime: this.contractInfo.signTime,
                            //业务类型代码
                            busTypeCode: this.contractInfo.busTypeCode,
                            //合同类型
                            contractType: this.contractInfo.contractType,
                            //免堆存天数
                            freeStorageDays: this.contractInfo.freeStorageDays,
                            //账期天数
                            paymentDays: this.contractInfo.paymentDays,
                            //开始日期
                            startTime: date_value,
                            //结束日期
                            endTime: date_value1,
                            //航次
                            shipvoyageId: this.contractInfo.shipvoyageId,
                            shipName: this.contractInfo.shipName,
                            voyage: this.contractInfo.voyage,
                            //是否船舶
                            isShip: this.contractInfo.isShip,
                            //备注
                            remark: this.contractInfo.remark == undefined ? "" : this.contractInfo.remark,
                            mattachmentInfoList: this.mattachmentInfoList,

                        }
                        this.btnLoading = true

                        // 合同录入类型
                        let url = ``
                        url = `/${this.$ServiceName}/api/external/operationContract/insert`

                        this.btnLoading = true
                        this.$http
                            .post(url, data)
                            .then(res => {
                                this.$message.success("新增合同成功！")
                                this.btnLoading = false
                                this.newContract = false
                                this.getoutMessageList()

                            })
                            .catch(error => {
                                this.btnLoading = false
                            })
                    }
                })
                this.selectStacking = null
                this.selectStackingJTJG = null
                this.selectDetails = null
            },
            //修改合同信息
            editContrat() {
                if (this.flag == 2) {
                    this.$message.error("当前合同已审核，无法修改！")
                    return
                }
                this.$refs.addContractInfo.validate(async valid => {
                    if (valid) {


                        let listRate = this.contractFrom.detailedSettlementData
                        let stackingCory = JSON.parse(JSON.stringify(this.contractFrom.stackingData))

                        let companyId = ""
                        let companyName = ""

                        for (let i = 0; i < this.departmentIds.length; i++) {
                            companyId += this.departmentIds[i] + ","
                        }
                        companyId = companyId.substring(0, companyId.length - 1)

                        for (let i = 0; i < this.departmentNames.length; i++) {
                            companyName += this.departmentNames [i] + ","
                        }
                        companyName = companyName.substring(0, companyName.length - 1)

                        //开始时间
                        let date = new Date(this.contractInfo.endStDate[0])
                        let date_value = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate()
                        //截止时间
                        let date1 = new Date(this.contractInfo.endStDate[1])
                        let date_value1 = date1.getFullYear() + "/" + (date1.getMonth() + 1) + "/" + date1.getDate()
                        this.mattachmentInfoList = []
                        this.businessLicenseList.forEach(item=>{
                            this.mattachmentInfoList.push(item)
                        })
                        var data = {
                            listRate: listRate,
                            listStorage: stackingCory,
                            //合同id
                            id: this.contractInfo.id,
                            //合同编号
                            contactNo: this.contractInfo.contactNo,
                            //业务单元
                            companyId: companyId,
                            companyName: companyName,
                            //客户名称
                            customerId: this.contractInfo.customerId,
                            //客户代码
                            customerName: this.contractInfo.customerName,
                            //签订日期
                            signTime: this.contractInfo.signTime,
                            //业务类型代码
                            busTypeCode: this.contractInfo.busTypeCode,
                            //合同类型
                            contractType: this.contractInfo.contractType,
                            //免堆存天数
                            freeStorageDays: this.contractInfo.freeStorageDays,
                            //账期天数
                            paymentDays: this.contractInfo.paymentDays,
                            //开始日期
                            startTime: date_value,
                            //结束日期
                            endTime: date_value1,
                            //航次
                            shipvoyageId: this.contractInfo.shipvoyageId,
                            shipName: this.contractInfo.shipName,
                            voyage: this.contractInfo.voyage,
                            //是否船舶
                            isShip: this.contractInfo.isShip,
                            //备注
                            remark: this.contractInfo.remark == undefined ? "" : this.contractInfo.remark,
                            mattachmentInfoList: this.mattachmentInfoList,
                        }
                        let url = ``
                        url = `/${this.$ServiceName}/api/external/operationContract/update`

                        this.btnLoading = true
                        this.$http
                            .put(url, data)
                            .then(res => {
                                this.$message.success("修改合同成功！")
                                this.btnLoading = false
                                this.newContract = false
                                this.contractDetails = false
                                this.getoutMessageList()
                            })
                            .catch(error => {
                                this.btnLoading = false
                            })
                    }
                })
                this.selectStacking = null
                this.selectStackingJTJG = null
                this.selectDetails = null
            },
            //删除合同信息
            deleteContract() {
                if (this.contractId == 0 || this.contractId == undefined) {
                    this.$message.error("请先选择一行合同信息")
                    return
                } else if (this.flag == 2) {
                    this.$message.error("当前合同已审核,无法删除~")
                    return
                }
                this.$confirm("此操作将无法撤回, 是否继续删除?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    // type: 'warning'
                })
                    .then(() => {
                        this.$http
                            .delete(`/${this.$ServiceName}/api/external/operationContract/deletebyid?id=${this.contractId}`)
                            .then(res => {
                                this.$message.success("删除成功")
                                if (this.queryall.startpage != 1 && this.tableData.length - 1 == 0) {
                                    this.queryall.startpage = this.queryall.startpage - 1
                                }
                                this.getoutMessageList()
                            })
                            .catch(error => {
                            })
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        })
                    })
            },
            //删除明细信息 1合同  2补充协议
            removeDetail(flag) {
                if (this.selectDetails == undefined || this.selectDetails == null) {
                    this.$message.error("请先选择一行数据")
                    return
                }
                let delValue = this.selectDetails.onlyTime
                let list = []
                if (this.priceData.length != 0) {
                    this.priceData.map((item, index) => {
                        // 通过遍历  阶梯价格表格数据 判断 当前数据是否被使用
                        if (item.hasOwnProperty("ladderPriceAccounts")) {
                            if (item.ladderPriceAccounts.length != 0) {
                                item.ladderPriceAccounts.map((childItem, childIndex) => {
                                    list.push(childItem.onlyTime)
                                })
                            }
                        }
                    })
                }
                if (list.includes(delValue)) {
                    return this.$message.warning("当前数据已被阶梯价格使用")
                }

                let index = this.selectDetails.index
                if (flag == 1) this.contractFrom.detailedSettlementData.splice(index, 1)
                else if (flag == 2) {
                    this.settlementData.splice(index, 1)
                }
            },
            //删除堆存明细信息
            removeStacking(flag) {
                if (this.selectStacking == undefined || this.selectStacking == null) {
                    this.$message.error("请先选择一行数据")
                    return
                }
                let index = this.selectStacking.index
                if (flag == 1) this.contractFrom.stackingData.splice(index, 1)
                else if (flag == 2) {
                    this.stackData.splice(index, 1)
                }
            },
            //删除阶梯费率信息
            removeLadder(flag) {
                console.log(this.selectLadder)
                if (this.selectLadder == undefined || this.selectLadder == null) {
                    this.$message.error("请先选择一行数据")
                    return
                }
                let index = this.selectLadder.index
                if (flag == 1) this.contractFrom.ladderData.splice(index, 1)
                else if (flag == 2) {
                    this.ladderData.splice(index, 1)
                }
            },

            //编辑合同明细信息
            showEditDetail(flag, type) {
                //修复后
                if (this.selectDetails == undefined || this.selectDetails == null) {
                    this.$message.error("请先选择一行数据")
                    return
                }
                if (type == "复制") {
                    this.detailIndex = 1
                    this.copyFlag = true
                } else if (type == "复制1") {
                    this.detailIndex = 3
                    this.copyFlag = true
                } else {
                    this.detailIndex = flag
                    this.copyFlag = false
                }
                if (this.$refs.addDetails != undefined) {
                    this.$refs.addDetails.resetFields()
                }

                this.contractDetail = JSON.parse(JSON.stringify(this.selectDetails))

                // 编辑或者复制时 作业过程 反选数据
                this.agentPageNum4 = 1
                this.agentTotalPageNum4 = ""
                this.agentQuery4 = ""
                this.agentsList4 = []
                // this.getOperationProcess({}, "agentsList4", "agentPageNum4", "agentTotalPageNum4")

                this.oldData = JSON.parse(JSON.stringify(this.selectDetails))
                this.addDetails = true
            },


            //编辑堆存明细信息
            showEditStacking(flag) {
                if (this.selectStacking == undefined || this.selectStacking == null) {
                    this.$message.error("请先选择一行数据")
                    return
                }
                this.stackingIndex = flag
                if (this.$refs.stackingDetail != undefined) {
                    this.$refs.stackingDetail.resetFields()
                }
                this.stackingDetail = JSON.parse(JSON.stringify(this.selectStacking))
                this.oldData = JSON.parse(JSON.stringify(this.selectStacking))
                this.stackingTitle = "堆存费明细"
                this.stackingDetails = true
            },

            //编辑阶梯费率信息
            showEditLadder(flag) {
                if (this.selectLadder == undefined || this.selectLadder == null) {
                    this.$message.error("请先选择一行数据")
                    return
                }

                if (this.$refs.ladderDetail != undefined) {
                    this.$refs.ladderDetail.resetFields()
                }
                this.ladderDetail = JSON.parse(JSON.stringify(this.selectLadder))
                this.oldData = JSON.parse(JSON.stringify(this.selectLadder))
                this.ladderTitle = "阶梯费率明细"
                this.selectLadder = true
            },

            showDetail() {
                this.mattachmentInfoList = []
                this.businessLicenseList = []
                this.fileList = []
                this.contractFrom.detailedSettlementData = []
                this.contractFrom.detailedSettlementData.ladderData = []
                this.contractFrom.stackingData = []
                this.contractFrom.ladderData = []
                this.title = '作业合同详情'
                // 判断当前选中的合同的类型
                // '合同类型字典：01-普通合同，02-单项船舶合同(单船、多船)',
                if (this.rowData.contractType == "02") {
                    this.showSeagoing = true
                    // 获取海轮预报下拉框数据
                    // this.getShipData()
                } else if (this.rowData.contractType == "01") {
                    this.showSeagoing = false
                }

                if (this.contractId == 0 || this.contractId == undefined || this.contractId == null || this.selectRowData == null) {
                    this.$message.error("请先选择一行合同信息")
                    return
                }

                // this.contractDetails = true
                this.$http
                    .get(`/${this.$ServiceName}/api/external/operationContract/listrelationcompany?id=${this.contractId}`)
                    .then(res => {
                        let data = res.data.data
                        this.contractInfo = data
                        //处理业务单元
                        let companyId = data.companyId
                        if (companyId) {
                            let arr = companyId.split(",");
                            this.contractInfo.companyId = arr
                            this.departmentIds = arr
                        }
                        let companyName = data.companyName
                        if (companyName) {
                            let arr = companyName.split(",");
                            this.departmentNames = arr
                        }
                        //处理开始日期结束日期
                        this.$set(this.contractInfo, "endStDate", [
                            data.startTime,
                            data.endTime,
                        ])
                        if (this.contractFrom.stackingData == null) {
                            this.contractFrom.stackingData = new Array()
                        } else {
                             this.contractInfo.listStorage.forEach((item,index)=>{
                                this.$set(item,'index',index)
                                this.contractFrom.stackingData.push(item)
                            })
                        }
                        this.contractInfo.listRate.forEach((item,index)=>{
                            this.$set(item,'index',index)
                            this.contractFrom.detailedSettlementData.push(item)
                        })

                        //业务类型-烘干
                        if(this.contractInfo.busTypeCode == '05'){
                            this.dryShow = true
                        }else{
                            this.dryShow = false
                        }

                        if(this.contractInfo.contractType == '1'){
                            this.isShipShow = true
                        }else{
                            this.isShipShow = false
                        }

                        if(this.contractInfo.isShip == 'Y'){
                            this.shipvoyageIdShow = true
                        }else{
                            this.shipvoyageIdShow = false
                        }

                        this.contractInfo.listRate.forEach((v, index) => {
                           if(v.dryType){
                               v.dryType = v.dryType+""
                           }
                        })

                        if (this.contractInfo.mattachmentInfoList.length == 0) {
                            this.mattachmentInfoList = []
                        } else {
                            this.mattachmentInfoList = this.contractInfo.mattachmentInfoList
                            this.mattachmentInfoList.forEach(item => {
                                this.businessLicenseList.push(
                                    {
                                        id: item.fileId,
                                        name: item.fileName,
                                        fileId: item.fileId,
                                        fileName: item.fileName
                                    }
                                )
                            })
                        }


                        // this.mattachmentInfoList = this.contractInfo.mattachmentInfoList
                        //
                        // this.mattachmentInfoList.forEach(item => {
                        //     this.fileList.push(
                        //         {
                        //             id: item.fileId,
                        //             name: item.fileName
                        //         }
                        //     )
                        // })

                        this.oldData = JSON.parse(
                            JSON.stringify({
                                contractInfo: this.contractInfo,
                                detailedSettlementData: this.contractFrom.detailedSettlementData,
                                priceData: this.priceData,
                                stackingData: this.contractFrom.stackingData,
                                stackingDataJTJG: this.stackingDataJTJG,
                            })
                        )

                    })
                    .catch(error => {
                    })
                this.index = 2
                this.agreemetFlag = 2
                this.selectDetails = null
                this.selectStacking = null
                this.selectStackingJTJG = null
                this.contractInfo = new Object()
                this.stackingDataJTJG = new Array()
                this.priceDetail = new Object()
                this.priceData = new Array()
                this.selectPrice = null
                this.isFirst = true
                this.newContract = true
            },


            showAddDetail(flag) {
                //明细结算数据新增 调用此方法，获取作业过程数据
                this.agentPageNum4 = 1
                this.agentTotalPageNum4 = ""
                this.agentQuery4 = ""
                this.agentsList4 = []
                this.detailTitle = "添加明细"
                this.detailIndex = flag
                this.contractDetail = {
                    isTon: "0",
                }
                this.addDetails = true
                // this.contractDetail.isTon='0'
                this.oldData = JSON.parse(JSON.stringify(this.contractFrom))
                this.checkContainFee = new Array()
                if (this.$refs.addDetails != undefined) {
                    this.$refs.addDetails.resetFields()
                }
            },
            // 费率标准添加行
            showAddRowDetail(){
                let data = {
                    companyName: '',
                    tradeType: '',
                    cargoName: '',
                    unitCode: '',
                    rate: '',
                    processName: '',
                    rateItemName: '',
                    treeSpeciesName:'',
                    dryType:'',
                    ladderData:[]
                }
                this.contractFrom.detailedSettlementData.push(data)


            },


            // 堆存费新增行
            showStackingRowDetail(){
                 let data = {
                    storageBeginDays: '',
                    storageEndDays: '',
                    rate: '',
                    unitCode: '',
                }
                this.contractFrom.stackingData.push(data)
            },

            // 阶梯费率新增行
            showLadderRowDetail(){
                console.log(this.selectDetails)
                if(this.selectDetails == null || this.selectDetails == undefined) {
                    this.$message.error("请先选择一条费率标准数据！")
                    return
                }
                let data = {
                    startQuantity: '',
                    endQuantity: '',
                    rate: '',
                }
                this.contractFrom.ladderData.push(data)
                this.contractFrom.detailedSettlementData[this.detailedIndex].ladderData = this.contractFrom.ladderData
                console.log( this.contractFrom.detailedSettlementData)
            },

            showNewContract(type) {
                this.flag = 0
                this.upLoadFileList = new Array()
                this.fileList = new Array()
                this.mattachmentInfoList = []
                this.businessLicenseList = []
                this.contractFrom.ladderData = []
                this.contractFrom.detailedSettlementData.ladderData = []
                this.index = 1
                this.shipvoyageIdShow = false
                this.isShipShow = false
                this.title = "新增合同"
                if (this.$refs.addContractInfo != undefined) {
                    this.$refs.addContractInfo.resetFields()
                }
                //获取客户信息
                this.getAgentsList({}, "agentsList2", "agentPageNum2", "agentTotalPageNum2")
                this.contractInfo = {
                    companyCode: [],
                }
                this.contractFrom.stackingData = new Array()
                this.stackingDataJTJG = new Array()
                this.selectDetails = null
                this.selectStacking = null
                this.selectStackingJTJG = null
                this.priceDetail = new Object()
                this.priceData = new Array()
                this.selectPrice = null

                this.contractFrom.detailedSettlementData = new Array()
                this.oldData = JSON.parse(
                    JSON.stringify({
                        contractInfo: this.contractInfo,
                        detailedSettlementData: this.contractFrom.detailedSettlementData,
                        priceData: this.priceData,
                        stackingData: this.contractFrom.stackingData,
                        stackingDataJTJG: this.stackingDataJTJG,
                    })
                )

                // 判断新增的类型
                if (type == "单船") {
                    this.showSeagoing = true
                    // this.contractInfo.shipApplyId = []
                    this.$set(this.contractInfo, "shipApplyId", [])
                    // 获取海轮预报下拉框数据
                } else {
                    this.showSeagoing = false
                }

                this.newContract = true
            },
            //获取选中行的信息
            getContractInfo(rowData) {

                this.rowData = rowData
                // this.childLength = rowData.children.length
                this.contractId = rowData.id
                this.parentId = rowData.id
                // this.selectParent = rowData.parentId
                this.selectRowData = rowData
                this.customerId = rowData.customerId
                this.flag = rowData.status

            },

            tableRowClassName({ row, rowIndex }) {
                row.index = rowIndex;
            },

            selectDetailed(row) {
                this.detailedIndex = row.index
                this.contractFrom.ladderData = this.contractFrom.detailedSettlementData[this.detailedIndex].ladderData
                this.selectDetails = JSON.parse(JSON.stringify(row))
                this.ladderShow = true

            },
            selectStackingData(rowData) {
                this.selectStacking = JSON.parse(JSON.stringify(rowData))
            },
            selectLadderData(rowData) {
                this.selectLadder = JSON.parse(JSON.stringify(rowData))
            },

            doubleClickRow(rowData) {
                this.contractId = rowData.id
                this.parentId = rowData.id
                this.selectRowData = rowData
                this.childLength = rowData.children.length
                this.showDetail()
            },

            contracTranfer() {
                //审核通过
                var dataid = {
                    id: this.contractId,
                }
                if (this.contractId == 0 || this.contractId == undefined) {
                    this.$message.error("请先选择")
                    return
                } else if (this.flag == 2) {
                    this.$message.error("审核完成，请勿重复审核！")
                    return
                }
                this.$confirm("此操作将无法撤回, 是否继续审核?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    // type: 'warning'
                })
                    .then(() => {
                        this.$http
                            .put(`/${this.$ServiceName}/api/external/operationContract/audit`, dataid)
                            .then(res => {
                                this.$message.success("审核成功")
                                this.contractId = null
                                this.getoutMessageList()
                            })
                            .catch(error => {
                            })
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消审核",
                        })
                    })
            },
            beforeUpload(file) {
                if (this.flag == 1) {
                    this.$message.error("审核完成，无法继续上传~")
                    return false
                }
            },

            //文件删除
            handleRemove(file, type) {
                this.mattachmentInfoList.forEach((v, index) => {
                    if (v.fileType == type) {
                        if (file.id == v.fileId) {
                            this.mattachmentInfoList.splice(index, 1)
                        }
                    }
                })
                this.fileList.forEach((item, i) => {
                    if (item.uid == file.uid) {
                        this.fileList.splice(i, 1)
                    }
                })
            },
            //文件下载
            async handleDownLoad(argu) {
                // 根据文件类型进行拆分，如果是PDF文件就新开页面预览，其他格式的设置下载查看

                var fileName = argu.fileName
                var baseurl = this.$http.defaults.baseURL
                if (fileName.indexOf(".pdf") != -1) {
                    var token = window.sessionStorage.getItem("token")
                    let routeUrl = this.$router.resolve({
                        path: "/pdfPreview",
                        query: {fileId: argu.fileId, token: token, baseurl: baseurl},
                    })
                    window.open(routeUrl.href, "_blank")
                } else {
                    await this.$http
                        .get(`/${this.$ServiceName}/api/external/protected/file/online?id=${argu.fileId}`, {
                            responseType: "arraybuffer",
                            params: {
                                token: window.sessionStorage.getItem("token"),
                            },
                        })
                        .then(res => {
                            const content = res.data
                            const blob = new Blob([content]) // 构造一个blob对象来处理数据
                            const link = document.createElement("a") // 创建a标签
                            if (argu.fileName != undefined) {
                                link.download = argu.fileName // a标签添加属性
                            } else {
                                link.download = argu.name // a标签添加属性
                            }
                            link.style.display = "none"
                            link.href = URL.createObjectURL(blob, {
                                type: `application/pdf`,
                            })
                            document.body.appendChild(link)
                            link.click() // 执行下载
                            URL.revokeObjectURL(link.href) // 释放url
                            document.body.removeChild(link) // 释放标签
                        })
                        .catch(error => {
                        })
                }
            },
            checkChange(val) {

                // if(val == 1){
                // 	this.checkdisabled = true
                // }else{
                // 	this.checkdisabled = false
                // }
                this.$refs.addDetails.clearValidate("operTonS")
                this.$refs.addDetails.clearValidate("operTonE")
            },
            numChange(val) {
                if (this.contractDetail.operTonS > this.contractDetail.operTonE) {
                    this.$message.error("作业吨范围最大值应该大于起算值~")
                    var focusInput = document.getElementById("operTonE")
                    focusInput.focus()
                    this.contractDetail.operTonE = ""
                    return
                }
                console.log(val)
            },
        },
    }
</script>

<style lang="less" scoped>


    //作业合同详情
    .detailForm {

        /deep/ .el-form-item {
            margin-left: 10px;
        }

        /deep/ .el-input {
            width: 100%;
            height: 32px;
        }

        /deep/ .el-textarea {
            margin-left: 0px !important;
        }

        // /deep/.el-textarea__inner {
        // 	width: 590px;
        // }
    }


    /deep/ .el-tabs__header {
        margin: 0 0 0;
    }

    //添加明细
    .addDetails {
        padding-left: 20px;
        overflow-y: auto;

        /deep/ .el-form-item {
            margin-top: 20px;
            margin-left: 12px;
        }

        // /deep/.el-input__inner {
        // 	width: 100%;
        // }
        //
        // 		.one {
        // 			width: 400px;
        // 			background-color: #ffffff;
        // 		}
        //
        // 		.two {
        // 			width: 190px;
        // 			background-color: #FFFFFF;
        // 		}
        /deep/ .two input {
            width: 110px !important;
        }
    }

    /deep/ .addDetails label {
        display: inline-table;
        line-height: 30px !important;
    }

    //堆存明细
    .stackingDetails {
        padding-left: 20px;
        padding-bottom: 100px;

        /deep/ .el-form-item {
            margin-top: 20px;
            margin-left: 12px;
        }

        /deep/ .el-input {
            width: 230px;
            background-color: #ffffff;
        }

        /deep/ .el-textarea {
            margin-left: 0 !important;
            width: 230px;
        }
    }
</style>

<style lang="less" scoped>

    /deep/ .el-table {
        max-height: none !important;
    }

    .selectBox {
        justify-content: space-between;
        display: flex;

        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-left: none;

        height: 50px;
        padding-top: 11px;
        padding-left: 14px;
        padding-right: 20px;
    }

    /deep/ .el-drawer__header {
        margin-bottom: 0;
        padding: 16px;
        border-bottom: 1px solid gainsboro;
    }

    /deep/ .el-button--primary {
        background-color: #338ce8;
        border-color: #338ce8;
    }

    .page {
        background: #ffffff;
        border-radius: 4px 4px 0 0;
        padding: 0 1rem;
    }

    .box {
        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-radius: 4px 4px 0 0;
        border-top: none;
    }

    .title {
        background: #f5f7fa;
        height: 40px;
        line-height: 40px;

        p {
            font-family: MicrosoftYaHei;
            font-size: 16px;
            color: #303133;
            letter-spacing: 0;
            line-height: 16px;
            padding-left: 14px;
            line-height: 40px;
        }
    }

    /deep/ .el-table .cell {
        white-space: nowrap;
    }

    /deep/ .el-form-item--mini .el-form-item__label {
        line-height: 0;
    }

    /deep/ .el-pagination {
        text-align: right;
        padding: 10px 5px;
    }

    /deep/ .el-table th > .cell {
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #606266;
    }

    /deep/ .el-table .el-button:focus,
    .el-table .el-button:hover {
        background-color: #fff;
        border: 1px solid #e1e4eb;
    }

    /deep/ .el-table .el-button--mini {
        color: #1684f6;
        border-color: transparent;
        background: transparent;
    }

    /deep/ .el-table th {
        border-left: 1px solid #ebeef5;
    }

    /deep/ .el-table th:nth-child(1) {
        border-left: none;
    }

    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #f5f7fa;
    }

    .right /deep/ .el-button--mini {
        padding: 7px 6px;
    }

    /deep/ .el-pagination.is-background .btn-next,
    /deep/ .el-pagination.is-background .btn-prev,
    /deep/ .el-pagination.is-background .el-pager li {
        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-radius: 3px;
        border-radius: 3px;
    }

    /deep/ .el-button + .el-button {
        margin-left: 3px;
    }

    .asa {
        display: inline;

        /deep/ .el-button--mini,
        .el-button--mini.is-round {
            padding: 7px 6px;
        }
    }

    .selectBox1 {
        justify-content: space-between;
        display: flex;
        flex-direction: row-reverse;
        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-left: none;
        line-height: 28px;
        height: 37px;
        padding-top: 11px;
        padding-left: 14px;
        padding-right: 20px;
    }

    .excelBox /deep/ .el-drawer__open .el-drawer.rtl {
        width: 50% !important;
    }

    /deep/ .el-form-item--mini.el-form-item {
        line-height: 28px;
    }

    /deep/ .demo-drawer__footer {
        text-align: right;
        padding-right: 1rem;
        border-top: 1px solid #c8cfde;
        background-color: #f5f7fa;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 50px;
    }

    .search_form {
        background-color: #F5F7FA;
        color: #303133;
        border-radius: 0px;
        border: 1px solid #E1E4EB;
        font-size: 14px;
        color: #606266;
        border-bottom: none;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 20px;
        box-sizing: border-box;

        /deep/ .el-select {
            margin-right: 0.7em;
        }

        /deep/ .search_btn {
            margin-left: 0.7em;
        }

        /deep/ .el-date-editor {
            margin-left: 0.7em;
        }

        /deep/ .others {
            width: 153px;
        }

        /deep/ .inout {
            width: 100px;
        }

        /deep/ .el-input {
            margin-left: 0.7em;
        }
    }
    .contractTable{
        .el-form-item {
            margin-bottom: 18px;
            margin-top: 15px;
            
        }
        /deep/.el-table__body{
            margin-bottom: 10px;
        }
        
    }
</style>